@import "common.less";

#container-main{
  #main-swiper{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 360px;
    #top-swiper{
      width: 100%;
      height: 100%;
    }
  }
  #curse-cate{
    overflow: hidden;
    margin-bottom: 20px;
    .layui-tab-brief{

      .layui-tab-title{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 84px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
        position: relative;
        border-bottom: 0;
        .show-more{
          position: absolute;
          right: 0;
          top:24px;
          color:#9B9B9B;
          .font-size20();
        }
        li{
          letter-spacing: 1px;
          .font-color-darkGray();
          .font-size24();
        }
        .layui-this{
          .font-color-blue();
          &:after{
            border-bottom: 2px solid #1890FF;
            top:19px;
          }
        }
      }
      .layui-tab-content{
        padding: 0;
        ul{
          .curse-live{
            position: relative;
            overflow: hidden;
            float: left;
            margin-right: 26px;
            width: 280px;
            height: 287px;
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #DAE0FD;
            .cur-live-img{
              margin-bottom: 10px;
              display: block;
              width: 100%;
              height: 157px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            &:hover{
              box-shadow: 0 2px 4px 2px rgba(218,224,253,0.8);
            }
            &:last-child{
              margin-right: 0;
            }
            .curse-name{
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
              -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
              -webkit-line-clamp: 2; /** 显示的行数 **/
              overflow: hidden;
              text-decoration: none;
              height: 56px;
              display: block;
              .font-size16();
              color:#4A4A4A;
              padding: 0 4px;
            }
            .teachers{
              padding: 0 4px;
              display: flex;
              align-items: center;
              .teacher-head{
                margin-right: 10px;
                overflow: hidden;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                display: inline-block;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .teacher-name{
                margin-right: 10px;
                display: inline-block;
                .font-size16();
              }

            }
            .has-learn{
              display: inline-block;
              position: absolute;
              bottom: 10px;
              right: 12px;
              font-size: 15px;
              color: #D0D4DB;
              letter-spacing: 0;
              line-height: 15px;
              i{
                font-style: normal;
              }
            }
          }
        }
      }
    }
  }
  .tem-for-curse-cate{
    overflow: hidden;
    .z-b-cate{
      width: 100%;
      .z-b-cate-l{
        .z-b-unit{
          width: 280px;
          float: left;
          background: #FFFFFF;
          border: 1px solid #EEEEEE;
          border-radius: 8px;
          height: 287px;
          margin:0 26px 20px 0;
        }
        &:nth-child(3){
          margin-right: 0;
        }
        &:nth-child(7){
          margin-right: 0;
        }
        .curse-live{
          position: relative;
          overflow: hidden;
          float: left;
          margin-right: 26px;
          width: 280px;
          height: 287px;
          border-radius: 8px;
          background-color: #fff;
          border: 1px solid #DAE0FD;
          .cur-live-img{
            margin-bottom: 10px;
            display: block;
            width: 100%;
            height: 157px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          &:hover{
            box-shadow: 0 2px 4px 2px rgba(218,224,253,0.8);
          }
          &:last-child{
            margin-right: 0;
          }
          &:nth-child(3){
            margin-right: 0;
          }
          .curse-name{
            text-decoration: none;
            height: 56px;
            display: block;
            .font-size16();
            color:#4A4A4A;
            padding: 4px;
          }
          .teachers{
            padding: 0 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .z-b-curse-garde{
              float: left;
              li{
                float: left;
                margin-right: 6px;
                width: 15px;
                height: 15px;
                background: #FFBD00;
              }
              .garde{
                float: left;
                font-size: 15px;
                color: #9B9B9B;
                font-style: normal;
              }
            }
            .teacher-name{
              margin-right: 10px;
              font-weight:700;
              display: inline-block;
              font-size: 20px;
              color: #17BC3F;
            }

          }
          .has-learn{
            display: inline-block;
            position: absolute;
            bottom: 10px;
            right: 12px;
            font-size: 15px;
            color: #D0D4DB;
            letter-spacing: 0;
            line-height: 15px;
            i{
              font-style: normal;
            }
          }
        }
        .z-b-swiper{
          margin-right: 26px;
          float: left;
          width: 586px;
          height: 287px;
          border-radius: 8px;
          overflow: hidden;
        }
      }
    }
  }
  #reco-teachers{
    margin-bottom: 20px;
    overflow: hidden;
    .reco-cate{
      .reco-cate-d{
        .teacher-intro{
          float: left;
          width: 280px;
          height: 209px;
          border-radius: 8px;
          background-color: #fff;
          border: 1px solid #EEEEEE;
          margin-right: 26px;
          margin-bottom: 20px;
          &:nth-child(4n){
            margin-right: 0;
          }
          &:hover{
            box-shadow: 0 2px 4px 2px rgba(218,224,253,0.8);
          }
          .teacher-head{
            margin-left: 98px;
            margin-top: 24px;
            margin-bottom: 18px;
            display: block;
            width: 84px;
            height: 84px;
            border-radius: 50%;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .r-teacher-name{
            display: block;
            width: 100%;
            font-size: 16px;
            color: #4A4A4A;
            letter-spacing: 0;
            line-height: 16px;
            text-align: center;
            margin-bottom: 16px;
          }
          .r-teacher-occu{
            color: #4A4A4A;
            letter-spacing: 0;
            text-align: center;
            line-height: 14px;
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
  #edu-dyn{
    .dyn-i-s{
      .dyn-i-s-d{
        .dyn-news{
          overflow: hidden;
          float: left;
          width: 258px;
          height: 347px;
          border-radius:8px;
          background-color: #fff;
          border: 1px solid #EEEEEE;
          margin-right: 56px;
          margin-bottom: 30px;
          &:nth-child(4n){
            margin-right: 0;
          }
          .news-img{
            display: block;
            width: 100%;
            height: 196px;
            margin-bottom: 17px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .news-title{
            text-decoration: none;
            font-size: 17px;
            color: #4A4A4A;
            letter-spacing: 0;
            line-height: 17px;
            display: block;
            padding: 0 7px 10px 10px;
          }
          .news-label{
            display: inline-block;
            font-size: 14px;
            color: #94A5FA;
            letter-spacing: 0;
            line-height: 15px;
            margin: 0 7px 16px 10px;
            cursor: pointer;
          }
          .user-f{
            border-bottom: 1px solid #EEEEEE;
            width: 100%;
            overflow: hidden;
            ul{
              li{
                float: left;
                font-size: 14px;
                color: #D0D4DB;
                letter-spacing: 0;
                line-height: 15px;
                margin: 0 22px 16px 0;
                .icon{
                  margin-left: 10px;
                  width: 15px;
                  height: 15px;
                  display: inline-block;
                  background-color: #D0D4DB;
                }
                i{
                  vertical-align: middle;
                  display: inline-block;
                  font-style: normal;
                }
              }
            }
          }
          .news-data{
            font-size: 13px;
            color: #6E6E6E;
            letter-spacing: 0;
            text-align: right;
            width: 100%;
            height: 44px;
            line-height: 44px;
          }
        }
      }
    }
  }
}

.title-s{
  margin: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cate-title-s{
    display: inline-block;
    .font-size24();
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 24px;
    color: #36404A;
  }
  .show-more{
    text-decoration: none;
    color:#9B9B9B;
    .font-size20();
  }
}